<template>
  <el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    class="demo-ruleForm"
  >
    <el-row type="flex" justify="center">
      <el-col :span="5">
        <el-form-item prop="username">
          <el-input
            type="text"
            placeholder="请输入用户名"
            required="required"
            v-model="ruleForm.username"
            prefix-icon="el-icon-user-solid"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="5">
        <el-form-item prop="password">
          <el-input
            type="password"
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            v-model="ruleForm.password"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="3">
        <el-form-item prop="seccode" class="inputbar">
          <el-input
            class="log-input"
            v-model="ruleForm.code"
            placeholder="验证码"
            prefix-icon="el-icon-lock"
          >
          </el-input>
        </el-form-item>
      </el-col>

      <el-col :span="2">
        <label for="img" @click="createCode()">
          <el-image :src="src" id="img"></el-image>
        </label>
        <el-button type="text" @click="createCode()">看不清，换一张</el-button>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="5">
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >登录</el-button
          >
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      ruleForm: {
        username: "",
        password: "",
        code: "",
      },
      src: "/user/checkCodeServlet",
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    //点击图片刷新验证码
    createCode() {
      axios
        .get("/user/checkCodeServlet?" + new Date().getTime())
        .then((resp) => {
          console.log(resp);
          this.src = "/user/checkCodeServlet?" + new Date().getTime();
        });
    },

    //点击登录，提交表单
    submitForm(formName) {
      //如果校验通过 就返回true
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //TODO:向后台发送异步请求，携带请求数据完成登录
          axios
            .post(
              "/user/loginServlet",
              `username=${this.ruleForm.username}&password=${this.ruleForm.password}&code=${this.ruleForm.code}`
            )
            .then((resp) => {
              //获取到前端的数据是true或者false
              console.log(resp.data);
              //如果验证通过，则登录成功，给出提示信息并跳转页面
              if (resp.data) {
                this.$message({
                  message: "恭喜你，成功登录！",
                  type: "success",
                });
                location.href = "#/success";
              } else {
                //验证不通过，提示用户名或者密码错误
                this.$message.error(
                  "您输入用户名、密码或者验证码错误，请重新输入！"
                );
              }
            });
        } else {
          //表单校验失败
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style>
</style>